<template>
  <a-layout style="background-color: #efefef; height: 100%">
    <a-layout-sider
      :style="{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
        top: 0,
        bottom: 0,
      }"
    >
      <div style="text-align: center; padding: 16px" class="ToolBarDark">
        <label style="color: white; font-size: larger; font-weight: bolder">{{
          $t("213")
        }}</label>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        theme="dark"
        @click="onMenuClick"
        :items="items"
        :openKeys="state.openKeys"
      >
      </a-menu>
      <div
        style="position: absolute; bottom: 0; width: 100%"
        class="ToolBarBottomDark"
      >
        <a-button
          type="link"
          danger
          :icon="h(LogoutOutlined)"
          :title="$t('214')"
          @click="logoutAdmin"
        ></a-button>
      </div>
    </a-layout-sider>
    <a-layout style="margin-left: 200px; background-color: white">
      <RouterView />
    </a-layout>
  </a-layout>
</template>
<script setup>
import { computed, h, onMounted, reactive } from "vue";
import {
  LogoutOutlined,
  SettingOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import CommonDefine from "@/component/CommonDefine";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const router = useRouter();

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}

const items = reactive([
  getItem(t("215"), "/admin/statics", () => h(SettingOutlined)),
  getItem("RocksDB", "am2", () => h(SettingOutlined), [
    getItem(t("216"), "/admin/backup-tool"),
    getItem(t("217"), "/admin/db-tool"),
  ]),
]);

const selectedKeys = reactive(["/admin/statics"]);

const userRole = computed(() => {
  return localStorage.getItem("urole");
});

const state = reactive({
  openKeys: ["am1", "am2"],
  popChat: false,
});

const onMenuClick = (event) => {
  if (userRole.value != "UrAdmin") {
    CommonDefine.alert(t("218"));
  } else {
    let route = event.key;
    if (router.path != route) {
      //获取路由对象并切换
      router.push(route);
      selectedKeys.splice(0, selectedKeys.length);
      selectedKeys.push(route);
    }
  }
};

const logoutAdmin = () => {
  router.push("/index");
};

onMounted(() => {
  let r = "/admin/statics";
  router.push(r);
  selectedKeys.splice(0, selectedKeys.length);
  selectedKeys.push(r);
});
</script>
